<template>
  <div>
    <h1>Home</h1>
    <!-- 声明式路由导航，使用router-link组件 -->
    <!-- <router-link to="/home/news" tag="button">新闻</router-link>
    <router-link to="/home/music" tag="button">音乐</router-link>
    <router-link to="/home/game" tag="button">游戏</router-link> -->
    <!-- to属性：可以写成字符串(见上面)，也可以写成下面的location对象（path可以用name代替） -->
    <!-- tag属性：可以通过配置tag属性生成别的标签 -->
    <!-- replace属性让路由跳转的过程中替换之前的历史记录 -->
    <!-- active-class:设置按键激活时的类名（实现导航高亮） -->
    <router-link
      :to="{
        path: '/home/news',
      }"
      tag="button"
      replace
      active-class="active"
      >新闻
    </router-link>

    <router-link
      :to="{
        path: '/home/music',
      }"
      tag="button"
      replace
      active-class="active"
      >音乐
    </router-link>

    <router-link
      :to="{
        path: '/home/game',
      }"
      tag="button"
      replace
      active-class="active"
      >游戏
    </router-link>

    <!-- home中的二级路由出口 -->
    <router-view></router-view>
  </div>
</template>
  
  <script>
export default {
  name: "Home",
};
</script>
  
  <style scoped>
.active {
  background: #666;
}
</style>